import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import { Input, Cell, Button, CountDown } from 'react-vant'
import { Lock } from '@react-vant/icons';
import '../css/Gzh_Login.scss'
import { post } from '../../../axios/request'
export default function Login() {
  const navgate = useNavigate()
  const [tel, setTel] = useState('')
  const [yzm, setYzm] = useState('')
  const [flag, setFlag] = useState(false)
  const test = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  const sendyzm = async () => {
    const { code } = await post('/sendyzm', { phone: tel })
    if (code === 200) {
      setFlag(true)
      alert('验证码已发送')

    }
  }
  const login = async () => {
    const { code ,token} = await post('/yzmlogin', { tel, yzm })
    if (code===200) {
      localStorage.setItem('token',token)

      navgate('/app')
    } else {
      alert('验证码错误')
    }
  }
  return (
    <div id='login'>
      <NavBar onBack={() => { navgate('/app') }}
        style={{ '--border-bottom': '1px #eee solid' }}
      ></NavBar>
      <h1 style={{ marginLeft: '0.4rem', fontSize: '.619rem', fontWeight: 'bold', marginTop: '0.3rem' }}>验证码登录</h1>
      <Cell>
        <Input
          prefix="+86"
          value={tel}
          style={{ borderBottom: '1px #71acfd solid', height: '1rem' }}
          onChange={text => setTel(text)}
          placeholder='请输入手机号码'
          clearable
          maxLength={11}
          v />
      </Cell>
      <Cell>
        <Input
          prefix={<Lock style={{ width: '0.5rem' }} />}
          value={yzm}
          style={{ borderBottom: '1px #ccc solid', height: '1rem' }}
          onChange={text => setYzm(text)}
          suffix={flag ? <div onClick={() => { setFlag(!flag) }} style={{ display: 'flex', alignItems: 'center' }}><CountDown time={60 * 1000} format='ss' /><span>s后重新获取</span></div> : <div onClick={() => { sendyzm() }} style={{ borderLeft: '1px solid #cccccc', color: test.test(tel) ? '#1778fb' : '#ccc', width: '3.5rem', textAlign: 'center' }}>获取验证码</div>}
          placeholder='请输入验证码'
          clearable
          maxLength={4}
        />
      </Cell>
      <div className='login_btn'>
        <Button onClick={() => { login() }} style={{ width: '8rem', margin: '0.5rem auto', height: '1rem', backgroundColor: tel && yzm ? '#1778fb' : '#ccc', border: 'none' }} type='primary' block round> 登录</Button>
      </div>
      <div className='login_text' style={{ display: 'flex', fontSize: '0.4rem', justifyContent: 'space-between', padding: '0 0.5rem' }}>
        <p onClick={() => { navgate('/pwdlogin') }}>密码登录</p>
        <p onClick={() => { navgate('/forgetpwd') }} >忘记密码？</p>
      </div>
      <div className='login_bottom'>
        <span style={{ fontSize: '0.3rem' }}>登录即同意<span style={{ color: '#1778fb' }}>《用户服务协议》</span>和<span style={{ color: '#1778fb' }}>《隐私政策》</span></span>
      </div>
    </div>
  )
}
